<!--
 * @Descripttion: 概况
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @LastEditTime: 2023-06-30 17:41:39
-->
<template>
  <el-row class="lb-survey" v-loading="!isLoad">
    <div class="page-main">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline">{{ $t('action.attendantName') }}概况</div>
      </div>
      <div class="class-menu-list flex-warp mt-lg pt-md">
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #608dff"
          >
            <i class="iconfont icon-account-line c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.total_coach || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">全部{{ $t('action.attendantName') }}</div>
              <lb-tool-tips :padding="0"
                >平台入驻的全部{{ $t('action.attendantName') }}，手机端的全部{{
                  $t('action.attendantName')
                }}+未认证{{ $t('action.attendantName') }}</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #2bcd8e"
          >
            <i class="iconfont icon-zaixian c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.work_coach || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">
                当前在线{{ $t('action.attendantName') }}人数
              </div>
              <lb-tool-tips :padding="0">
                当前在接单的{{
                  $t('action.attendantName')
                }}是指当前时间为时间范围内的{{
                  $t('action.attendantName')
                }}，包含在线的虚拟{{ $t('action.attendantName') }}
              </lb-tool-tips>
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #ff6b73"
          >
            <i class="iconfont icon-xiuxi c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.rest_coach || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">
                休息{{ $t('action.attendantName') }}人数
              </div>
              <lb-tool-tips :padding="0">
                <div class="mt-sm">
                  1、关闭了接单按钮的{{ $t('action.attendantName') }}
                </div>
                <div class="mt-sm">
                  2、开启了接单按钮但当前时间不在{{
                    $t('action.attendantName')
                  }}工作时间范围内的{{ $t('action.attendantName') }}
                </div>
              </lb-tool-tips>
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #9370db"
          >
            <i class="iconfont icon-jiedan c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.app_coach || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">
                接单{{ $t('action.attendantName') }}人数
              </div>
              <lb-tool-tips :padding="0"
                >当前时间有在进行的订单的{{
                  $t('action.attendantName')
                }}人数</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center mt-lg pt-lg">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #daa520"
          >
            <i class="iconfont iconshenqingjishi3 c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.bind_coach || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">
                已绑定{{ $t('action.attendantName') }}
              </div>
              <lb-tool-tips :padding="0"
                >绑定了真实用户ID的{{
                  $t('action.attendantName')
                }}</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center mt-lg pt-lg">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #ff6347"
          >
            <i class="iconfont iconpingbiyonghu c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.nobind_coach || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">
                未绑定{{ $t('action.attendantName') }}
              </div>
              <lb-tool-tips :padding="0"
                >后台添加的{{
                  $t('action.attendantName')
                }}，但未绑定真实用户</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center mt-lg pt-lg">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #5f9ea0"
          >
            <i class="iconfont iconwoyaojieyue c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.cancel_coach || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">解约{{ $t('action.attendantName') }}</div>
              <lb-tool-tips :padding="0"
                >取消授权的{{ $t('action.attendantName') }}</lb-tool-tips
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fill-body space-lg"></div>
    <div class="page-main" style="height: 552px">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline">
          {{ $t('action.attendantName') }}数据统计
        </div>
      </div>
      <div class="space-lg"></div>
      <div class="data-count-list flex-warp">
        <div class="item-child pt-md">
          <div class="flex-y-center pb-lg" style="font-size: 15px">
            <div class="c-title text-bold">区域分布</div>
            <a href="/#/map" target="_blank" class="c-link ml-md"
              >点击查看地图数据</a
            >
          </div>
          <div style="width: 90%">
            <el-table
              :data="base_count.province_coach"
              height="365"
              border
              style="width: 100%"
            >
              <el-table-column property="title" label="省份">
                <template slot-scope="scope">
                  {{ `${scope.$index * 1 + 1}、${scope.row.title}` }}
                </template>
              </el-table-column>
              <el-table-column
                property="coach_count"
                :label="'累计' + $t('action.attendantName') + '数量'"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="item-child f-paragraph pt-md">
          <div class="pb-lg c-title text-bold" style="font-size: 15px">
            性别占比
          </div>
          <div
            style="width: 100%; height: 400px; background: #fff"
            v-if="isLoad"
          >
            <sex-echarts :datas="base_count.sex" />
          </div>
        </div>
      </div>
    </div>
    <!-- 营收数据 -->
    <!-- 技-师数据 -->
    <div class="fill-body space-lg"></div>
    <div class="page-main">
      <div class="pb-lg c-title b-1px-b">
        <div class="flex-y-baseline f-title text-bold">
          {{ $t('action.attendantName') }}数据
        </div>
      </div>
      <div class="space-lg"></div>

      <el-row class="page-search-form">
        <el-form
          @submit.native.prevent
          :inline="true"
          :model="searchForm"
          ref="searchForm"
        >
          <el-form-item label="统计类型" prop="top_type">
            <el-select
              @change="getTableDataList(1)"
              v-model="searchForm.top_type"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in technicialTypeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间" prop="start_time">
            <el-button-group>
              <el-button
                @click="toChangeItem('rankInd', index)"
                :plain="rankInd !== index"
                type="primary"
                v-for="(item, index) in rankList"
                :key="index"
                >{{ item.title }}</el-button
              >
            </el-button-group>
            <el-date-picker
              @change="getTableDataList(1)"
              v-model="searchForm.start_time"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
              v-if="searchForm.time_type === 5"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <lb-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              style="margin-right: 5px"
              @click="getTableDataList(1)"
              >{{ $t('action.search') }}</lb-button
            >
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              style="margin-right: 5px"
              @click="resetForm('searchForm')"
              >{{ $t('action.reset') }}</lb-button
            >
          </el-form-item>
        </el-form>
      </el-row>
      <lb-button
        style="margin-bottom: 20px"
        size="mini"
        plain
        type="primary"
        icon="el-icon-download"
        :loading="downloadLoading"
        @click="toExportExcel"
        v-hasPermi="`${$route.name}-export`"
      >
        {{ $t('action.export') }}
      </lb-button>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column prop="coach_id" label="ID" fixed></el-table-column>
        <el-table-column prop="work_img" label="头像" min-width="120">
          <template slot-scope="scope">
            <lb-image :src="scope.row.work_img" />
          </template>
        </el-table-column>
        <el-table-column
          prop="coach_name"
          label="姓名"
          min-width="120"
        ></el-table-column>
        <el-table-column prop="coach_star" label="评分"></el-table-column>
        <el-table-column prop="coach_level.title" label="等级" min-width="120">
          <template slot="header" slot-scope="scope">
            <div style="margin-top: 7px">
              等级<lb-tool-tips padding="10"
                >{{ $t('action.attendantName') }}当日等级</lb-tool-tips
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="service_timelong"
          label="服务时长"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.service_timelong }}分钟
          </template>
        </el-table-column>
        <el-table-column
          prop="coach_onlinetime"
          label="在线时长"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.coach_onlinetime }}分钟
          </template>
        </el-table-column>
        <el-table-column
          prop="order_service_price"
          label="业绩"
          min-width="120"
        >
          <template slot-scope="scope">
            ¥{{ scope.row.order_service_price }}
          </template>
        </el-table-column>
        <el-table-column prop="add_balance" label="" min-width="120">
          <template slot="header" slot-scope="scope">
            <div style="margin-top: 7px">
              加钟率<lb-tool-tips padding="10"
                >{{
                  $t('action.attendantName')
                }}统计日当日的完成加钟订单的业绩</lb-tool-tips
              >
            </div>
          </template>
          <template slot-scope="scope"> {{ scope.row.add_balance }}% </template>
        </el-table-column>
        <el-table-column prop="coach_integral" label="积分" min-width="120">
        </el-table-column>
        <el-table-column
          prop="total_order_count"
          label="总订单量"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="service_order_count"
          label="已服务单量"
          min-width="120"
        >
        </el-table-column>
        <el-table-column prop="refund_balance" label="" min-width="120">
          <template slot="header" slot-scope="scope">
            <div style="margin-top: 7px">
              退单率<lb-tool-tips padding="10"
                >退单率=用户退单订单数/总订单数</lb-tool-tips
              >
            </div>
          </template>
          <template slot-scope="scope">
            {{ scope.row.refund_balance }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="cancel_order_count"
          label="总拒单数"
          min-width="120"
        ></el-table-column>
      </el-table>
      <lb-page
        :batch="false"
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </lb-page>
      <div class="space-md"></div>
    </div>
  </el-row>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import sexEcharts from './sexEcharts'
export default {
  components: {
    sexEcharts
  },
  data () {
    return {
      isLoad: false,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 59 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
      base_count: {},
      rankInd: 2,
      rankList: [{ id: 1, title: '今日' }, { id: 2, title: '本周' }, { id: 3, title: '本月' }, { id: 4, title: '全年' }, { id: 5, title: '自定义' }],
      technicialTypeList: [{ id: 6, title: '评分' }, { id: 2, title: '服务时长' }, { id: 3, title: '业绩' }, { id: 4, title: '加钟率' }, { id: 5, title: '积分' }],
      colorType: {
        0: '#608dff',
        1: '#2bcd8e',
        2: '#ff6b73'
      },
      loading: false,
      searchForm: {
        page: 1,
        limit: 10,
        top_type: 6,
        time_type: 3,
        start_time: '',
        end_time: ''
      },
      tableData: [],
      total: 0,
      downloadLoading: false
    }
  },
  created () {
    this.initIndex()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    async initIndex () {
      let { data } = await this.$api.survey.coachAndUserData()
      let { man, woman } = data.sex
      man.title = '男'
      woman.title = '女'
      data.sex = [man, woman]
      this.base_count = data
      this.isLoad = true
      await this.getTableDataList(1)
    },
    resetForm (form) {
      this.rankInd = 2
      this.searchForm.time_type = 3
      this.$refs[form].resetFields()
      this.getTableDataList(1)
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    },
    async getTableDataList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let searchForm = JSON.parse(JSON.stringify(this.searchForm))
      let { start_time: time } = searchForm
      if (time && time.length > 0) {
        searchForm.start_time = time[0] / 1000
        searchForm.end_time = time[1] / 1000
      } else {
        searchForm.start_time = ''
        searchForm.end_time = ''
      }
      let { code, data } = await this.$api.technician.coachDataList(searchForm)
      this.loading = false
      if (code !== 200) return
      this.tableData = data.data
      this.total = data.total
    },
    async toChangeItem (key, val) {
      if (key === 'rankInd') {
        let { id } = this.rankList[val]
        this.searchForm.time_type = id
        this.rankInd = val
        if (val === 4 && this.searchForm.start_time.length === 0) return
      }
      this.getTableDataList(1, 'list')
    },
    /**
       * @method 导出
       */
    toExportExcel () {
      this.downloadLoading = true
      let searchForm = JSON.parse(JSON.stringify(this.searchForm))
      let { start_time: time } = searchForm
      if (searchForm.time_type === 5 && time.length === 0) {
        this.downloadLoading = false
        this.$message.error(`请选择自定义时间段`)
        return
      }
      if (time && time.length > 0) {
        searchForm.start_time = time[0] / 1000
        searchForm.end_time = time[1] / 1000
      } else {
        searchForm.start_time = ''
        searchForm.end_time = ''
      }
      let url = this.$util.getProCurrentHref()
      let keywords = url.indexOf('?') > 0 ? '' : '?'
      let flag = url.indexOf('?') > 0
      Object.getOwnPropertyNames(searchForm).forEach((keys, value) => {
        keywords += flag
          ? `&${keys}=${searchForm[keys]}`
          : `${keys}=${searchForm[keys]}`
        flag = true
      })
      let token = window.localStorage.getItem('massage_minitk')
      let dwonlaodUrl = `${url}/massage/admin/AdminExcel/coachDataList${keywords}&token=${token}`
      window.location.href = dwonlaodUrl
      setTimeout(() => {
        this.downloadLoading = false
      }, 5000)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-survey {
  #map-container-box {
    width: 100%;
    height: 750px;
    margin: 0 auto;
  }
  .data-count-list {
    height: 420px;
    .item-child {
      height: 420px;
      .item-text {
        width: 70%;
        .rank-tag {
          width: 25px;
          height: 25px;
          .text {
            transform: scale(0.8);
          }
        }
        .ellipsis {
          max-width: calc(100% - 35px);
        }
      }
    }
    .item-child:nth-child(1) {
      width: 60%;
    }
    .item-child:nth-child(2) {
      width: 40%;
    }
  }
  .class-menu-list {
    .item-child {
      width: 25%;
    }
  }
  .item-icon {
    width: 50px;
    height: 50px;
    .iconfont {
      font-size: 25px;
    }
  }
}
</style>
